<template>
  <div>
    <p class="tltle">banner管理</p>
    <div class="headerbox">
      <div class="box1">
        <div>
          <span>状态：</span>
          <el-select v-model="state" @change="getBanner" size="small" placeholder="请选择">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </div>
      </div>
      <div class="btn">
        <el-button type="primary" size="small" @click="addbanner">新建</el-button>
      </div>
    </div>
    <div class="table">
      <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%" border>
        <el-table-column type="index" align="center" label="序号" width="80">
        </el-table-column>
        <el-table-column prop="title" align="center" label="banner名称">

        </el-table-column>

        <el-table-column label="位置" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.positions==1">首页-发现</span>
            <span v-else-if="scope.row.positions==2">首页-广播</span>
            <span v-else-if="scope.row.positions==3">活动</span>

          </template>
        </el-table-column>
        <el-table-column align="center" label="类型">
          <template slot-scope="scope">
            <span v-if="scope.row.banType==1">链接</span>
            <span v-else-if="scope.row.banType==2">广播</span>
            <span v-else-if="scope.row.banType==3">活动</span>
            <span v-else-if="scope.row.banType==4">富文本</span>


          </template>
        </el-table-column>
        <el-table-column prop="recTime" align="center" label="启动时间">
        </el-table-column>
        <el-table-column prop="cancelTime" align="center" label="关闭时间">
        </el-table-column>

        <el-table-column prop="hits" align="center" label="点击量">

        </el-table-column>
        <el-table-column prop="orders" align="center" label="排序">

        </el-table-column>
        <el-table-column prop="creatername" align="center" label="创建人">

        </el-table-column>
        <el-table-column label="状态" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.state==1">上架</span>
            <span v-else-if="scope.row.state==2">下架</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <div class="handle">
              <el-button type="text" @click="checkout(scope.row.banId)">查看</el-button>
              <el-button type="text" @click="updateBannerState(scope.row.banId,2)" v-if="scope.row.state == 1">下架</el-button>
              <el-button type="text" @click="updateBannerState(scope.row.banId,1)" v-else-if="scope.row.state == 2">上架</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <Page :total="total" :PageNumber.sync="pageNumber" :PageSize.sync="pageSize" @current-change="changeCurrentPage"
        @size-change="handleSizeChange">
      </Page>
    </div>
  </div>
</template>

<script>
  import Page from "../../components/page.vue";
  import banner from "../../apis/modules/banner"

  export default {
    components: {
      Page,
    },
    data() {
      return {
        state: "",//状态
        pageNumber: 1,//当前页数
        pageSize: 10,//每页显示多少条
        total: 0,//总数
        tableData: [],//列表数据
        options: [
          {
            value: "all",
            label: "全部",
          },
          {
            value: "1",
            label: "上架",
          },
          {
            value: "2",
            label: "下架",
          },
        ],

      };
    },
    created() {
      this.getBanner()
    },
    methods: {
      async getBanner() {
        const { code, data, msg } = await banner.getBanner({
          state: this.state,
          pageNumber: this.pageNumber,
          pageSize: this.pageSize
        })
        if (code == 200) {
          this.total = data.count;
          this.tableData = data.list
        }
      },
      //改变当前页数
      changeCurrentPage(val) {
        console.log(val);
      },
      //改变每页显示条数
      handleSizeChange(val) {
        console.log(val);
      },
      addbanner() {
        this.$router.push('/Home/AddBanner')
      },
      checkout(banId) {
        this.$router.push('/Home/CheckoutBanner?banId='+banId)
      },
      async updateBannerState(banId,state){
        const { code, data, msg } = await banner.updateBannerState({
          banId : banId,
          state : state
        })
        if(code == 200){
          location.reload();
        }
      }
    },
  };
</script>

<style lang="scss" scoped>
  .tltle {
    margin-bottom: 32px;
  }

  .headerbox {
    display: flex;
    justify-content: space-between;
  }

  .box1 {
    display: flex;
    justify-content: space-between;
    width: 650px;
  }

  .btn {
    float: right;
  }

  .table {
    margin-top: 20px;
  }
</style>
